<template>
  <div id="box2" style="padding: 50px 50px 40px 50px">
    <div id="con2" ref="con2" :class="{anim:animate2==true}" @mouseenter="mEnter2" @mouseleave="mLeave2">
      <p v-for='alarm in secondLevelAlarms' :key="alarm.id" style="font-size: 14px;" class="abnormalRecord">
        时间：{{alarm.create_time}} 异常：{{alarm.descriptor}}
      </p>
    </div>
  </div>
</template>

<script>
import request from '../../../network/request'
export default {
  name: 'abnormalRecord',
  data () {
    return {
      secondLevelAlarms: [],
      abnormalRecord: {
        secondLatestId: -1
      }
    }
  },
  created () {
    this.getSecondLevelRecords()
    window.setInterval(() => {
      setTimeout(this.getInterruptMsg(), 0)
    }, 60000)
  },
  mounted () {
    this.timer2 = setInterval(this.scroll2, 300)
  },
  beforeDestroy () {
    clearInterval(this.timer2)
  },
  methods: {
    getSecondLevelRecords () {
      var that = this
      request({
        method: 'POST',
        url: '/dataOp/getAlarmClassByType',
        data: {
          id: this.abnormalRecord.secondLatestId,
          type: -2,
          alarmClass: -2
        }
      }).then(res => {
        /**
         * 接新告警
         */
        // console.log('res.data.data:', res.data.data)
        // console.log('2length', res.data.data.abdata.length)
        if (res.data.data.abdata.length !== 0) {
          if (res.data.data.abdata.length > 50) {
            res.data.data.abdata = res.data.data.abdata.slice(-50)
            console.log('截取后：1length', res.data.data.abdata.length)
          }
          for (let i = 0; i < res.data.data.abdata.length; i++) {
            that.secondLevelAlarms.push(res.data.data.abdata[i])
            that.abnormalRecord.secondLatestId = parseInt(res.data.data.abdata[i].id)
          }
        } else {
          if (that.secondLevelAlarms.length === 0) {
            that.secondLevelAlarms.push(
              {
                id: 0,
                descriptor: '没有新数据',
                create_time: '2000-01-01 00:00:00'
              }
            )
          }
          console.log('没有新数据')
        }
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    // 是否中断
    getInterruptMsg () {
      request({
        method: 'POST',
        url: '/dataOp/judgeInterupt'
      }).then(r => {
        if (r.data.message !== '数据源连接正常') {
          this.$alert(r.data.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    scroll2 () {
      // eslint-disable-next-line no-unused-vars
      const con2 = this.$refs.con2
      this.animate2 = !this.animate2
      var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        if (that.secondLevelAlarms.length <= 20) {
          that.getSecondLevelRecords()
        }
        if (that.secondLevelAlarms[0].id !== 0) {
          that.secondLevelAlarms.shift()// 向前滚动一条
        }
        that.animate2 = !that.animate2 // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 300)
    },
    mEnter2 () {
      clearInterval(this.timer2)
    },
    mLeave2 () {
      this.timer2 = setInterval(this.scroll2, 300)
    }
  }
}
</script>

<style scoped>

  #box2{
    width: auto;
    height: 33vh;
    line-height: 25px;
    overflow: hidden;
    padding-left: 30px;
    border: 0px solid #D3DCE6;
    transition: all 0.5s;
    margin-left:0%;
    border-radius:5px;
    padding-top: 100px;
    margin-top:0px;
  }

  #con2 li{
    list-style: none;
    line-height: 40px;
    height: 60px;
  }
  .abnormalRecord {
    width: 100%; /*一定要设置宽度，或者元素内含的百分比*/
    /*overflow: hidden; 溢出的部分隐藏*/
    /* white-space: nowrap; 文本不换行*/
    text-overflow: ellipsis;
  }
</style>
